<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../static/plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../static/plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../static/css/main.css">
    <link rel="stylesheet" href="../../static/css/jquery.datetimepicker.css">
    <link href="../../static/plugins/fileupload/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="../../static/libs/jquery.min.js"></script>
    <script src="../../static/libs/jquery.datetimepicker.js"></script>
    <script src="../../static/plugins/layer/layer.js"></script>
    <script src="../../static/libs/bootstrap.min.js"></script>
    <script src="../../static/libs/vue.min.js"></script>
    <script src="../../static/plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../static/plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../static/plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../static/js/common.js"></script>
    <script src="../../static/plugins/fileupload/js/fileinput.js" type="text/javascript"></script>
    <script src="../../static/plugins/fileupload/js/locales/zh.js" type="text/javascript"></script>
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn col-sm-12">
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" v-model="q.name" @keyup.enter="query" placeholder="教程名称">
            </div>
            <div class="form-group col-sm-2">
                <input type="text" id="releaseTimeBeginId" class="form-control"
                       placeholder="上架时间开始日期" />
            </div>
            <div class="form-group col-sm-2">
                <input type="text" id="releaseTimeEndId" class="form-control"
                       placeholder="上架时间结束日期" />
            </div>
            <a class="btn btn-default" @click="query">查询</a>
        </div>
        <div class="grid-btn">
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
            <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
            <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal" style="width: 800px;">
            <div class="form-group">
                <div class="col-sm-2 control-label">名称</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="teach.name" placeholder="名称(必填，1-25字)"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">副标题</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="teach.subhead" placeholder="副标题(必填，1-25字)"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">简介</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="teach.introduce" placeholder="简介(必填，1-100字)"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">图片</div>
                <div class="col-sm-10">
                    <!--<input type="text" class="form-control" v-model="teach.img" placeholder="图片"/>-->
                    <input type="file" name="file" class="form-control" id="img"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">类型</div>
                <div class="col-sm-10">
                    <!--<input type="text" class="form-control" v-model="teach.type" placeholder="类型"/>-->
                    <select class="form-control" v-model="teach.type">
                        <option value="1">基础</option>
                        <option value="2">进阶</option>
                        <option value="3">考级</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">作者</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="teach.author" placeholder="作者(必填，1-25字)"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">上传者</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="teach.uploadUser" placeholder="上传者(必填，1-25字)"/>
                </div>
            </div>
            <!--<div class="form-group">-->
            <!--<div class="col-sm-2 control-label"></div>-->
            <!--<div class="col-sm-10">-->
            <!--<input type="text" class="form-control" v-model="teach.createTime" placeholder=""/>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">-->
            <!--<div class="col-sm-2 control-label"></div>-->
            <!--<div class="col-sm-10">-->
            <!--<input type="text" class="form-control" v-model="teach.updateTime" placeholder=""/>-->
            <!--</div>-->
            <!--</div>-->
            <div class="form-group">
                <div class="col-sm-2 control-label">视频上传</div>
                <div class="col-sm-10">
                    <a class="btn btn-default" @click="addVedio">+</a>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <div class="col-sm-10" >
                    <ul id="myVedio" class="list-group">

                    </ul>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">关联曲谱</div>
                <div class="col-sm-10">
                    <a class="btn btn-default" @click="openSongList">关联</a>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">已关联的曲谱</div>
                <div class="col-sm-10">
                    <ul id="sortable" class="list-group" v-for="sl in songList">
                        <li class="list-group-item" :data-id="sl.id">{{sl.name}}--{{sl.hardName}}</li>
                    </ul>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>
</div>

<script src="../../static/js/modules/sys/teach.js"></script>
</body>
</html>